import 'package:flutter/material.dart';

var notext = 'No Text';

enum TextOptions { Simplified, Traditional, notext }

enum AudioOptions { Mandarin, Cantonese, No_audio }

enum AutoplayOptions { True, False }

enum PinyinOptions { True, False }

class MyBookSettings extends StatefulWidget {
  const MyBookSettings({Key? key, this.bookId, this.assignmentId})
      : super(key: key);
  final String? bookId;
  final String? assignmentId;
  @override
  State<MyBookSettings> createState() => _MySetting();
}

class _MySetting extends State<MyBookSettings> {
  TextOptions? _text = TextOptions.Simplified;
  AudioOptions? _audio = AudioOptions.Mandarin;
  AutoplayOptions? _auto = AutoplayOptions.False;
  PinyinOptions? _pinyin = PinyinOptions.True;
  //JavaScriptCalls.jsGetTotalPages();
  // await controller.evaluateJavascript(
  //                     source: JavaScriptCalls.jsGetTotalPages);
  @override
  Widget build(BuildContext context) {
    return Container(
        // height: 200,
        // width: MediaQuery.of(context).size.width,
        padding: EdgeInsets.all(30.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              height: 750,
              width: 200,
              child: Column(children: [
                Text('Text Setting',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Color.fromARGB(156, 0, 0, 0).withOpacity(0.8),
                        fontSize: 19)),
                RadioListTile<TextOptions>(
                  title: const Text('Simplified'),
                  value: TextOptions.Simplified,
                  groupValue: _text,
                  onChanged: (TextOptions? value) {
                    setState(() {
                      _text = value;
                    });
                  },
                ),
                RadioListTile<TextOptions>(
                  title: const Text('Traditional'),
                  value: TextOptions.Traditional,
                  groupValue: _text,
                  onChanged: (TextOptions? value) {
                    setState(() {
                      _text = value;
                    });
                  },
                ),
                RadioListTile<TextOptions>(
                  title: const Text('No Text'),
                  value: TextOptions.notext,
                  groupValue: _text,
                  onChanged: (TextOptions? value) {
                    setState(() {
                      _text = value;
                    });
                  },
                ),
                SizedBox(height: 20),
                Text('Language Setting',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Color.fromARGB(156, 0, 0, 0).withOpacity(0.8),
                        fontSize: 19)),
                RadioListTile<AudioOptions>(
                  title: const Text('Mandarin'),
                  value: AudioOptions.Mandarin,
                  groupValue: _audio,
                  onChanged: (AudioOptions? value) {
                    setState(() {
                      _audio = value;
                    });
                  },
                ),
                RadioListTile<AudioOptions>(
                  title: const Text('Cantonese'),
                  value: AudioOptions.Cantonese,
                  groupValue: _audio,
                  onChanged: (AudioOptions? value) {
                    setState(() {
                      _audio = value;
                    });
                  },
                ),
                RadioListTile<AudioOptions>(
                  title: const Text('No Audio'),
                  value: AudioOptions.No_audio,
                  groupValue: _audio,
                  onChanged: (AudioOptions? value) {
                    setState(() {
                      _audio = value;
                    });
                  },
                ),
                SizedBox(height: 20),
                Text('Audioplay Setting',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Color.fromARGB(156, 0, 0, 0).withOpacity(0.8),
                        fontSize: 19)),
                RadioListTile<AutoplayOptions>(
                  title: const Text('True'),
                  value: AutoplayOptions.True,
                  groupValue: _auto,
                  onChanged: (AutoplayOptions? value) {
                    setState(() {
                      _auto = value;
                    });
                  },
                ),
                RadioListTile<AutoplayOptions>(
                  title: const Text('False'),
                  value: AutoplayOptions.False,
                  groupValue: _auto,
                  onChanged: (AutoplayOptions? value) {
                    setState(() {
                      _auto = value;
                    });
                  },
                ),
                SizedBox(height: 20),
                Text('Pinyin Setting',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Color.fromARGB(156, 0, 0, 0).withOpacity(0.8),
                        fontSize: 19)),
                RadioListTile<PinyinOptions>(
                  title: const Text('True'),
                  value: PinyinOptions.True,
                  groupValue: _pinyin,
                  onChanged: (PinyinOptions? value) {
                    setState(() {
                      _pinyin = value;
                    });
                  },
                ),
                RadioListTile<PinyinOptions>(
                  title: const Text('False'),
                  value: PinyinOptions.False,
                  groupValue: _pinyin,
                  onChanged: (PinyinOptions? value) {
                    setState(() {
                      _pinyin = value;
                    });
                  },
                ),
              ]),
            )
          ],
        ));
  }
}
